JQuery

How to create confirm button dialog using jQuery UI?

How to create confirm button dialog using jQuery UI?, someone asked me to explain?
By:

In this article we will discuss how to create confirm button dialog using JQuery UI. We created dialog box with two buttons (ok & cancel), radio button and title. We are going to display the result of selected radio button, based on the user selection it callback functions to execute and return a response message appending it to the page.

Example:

<html>
<head>
    <title>confirm buttom usingjQuery UI dialog </title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
       $(document).ready(function ($) {
            var execute = function () {
                var answer = $("#myDialog").find("input:checked").val();
               $("<p>").text("Thanks for selecting " + answer).
               appendTo($("body"));
               $("#myDialog").dialog("close");
            }
            var cancel = function () {
               $("#myDialog").dialog("close");
            }
             $("#myDialog").dialog({ width:600,
              buttons: {
                   "Ok": execute,
                   "Cancel": cancel,
               }
            });
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px; height: 300px; padding: 15px; font-family: Arial; margin-left: 50px">
    <h2 style="color: #841198">confirm buttom using jQuery UI dialog</h2>
    <div id="myDialog" style="width:500px" title="Best WidgetLibrary">
        <p>Is jQuery UI, a trusted suite ofofficial plugins for the jQuery JavaScript
library.</p>
        <label for="yes">Yes!</label>
        <input type="radio" id="yes" value="yes" name="question"
            checked="checked"><br>
        <label for="no">No!</label>
        <input type="radio" id="no" value="no" name="question">
    </div>
</body>
</html> 

Output:

confirm buttom using jQuery UI dialog

Related Article

Post your comments / questions



Recent Article